<template>
  <view class="progress-bar-container">
    <!-- 进度条背景 -->
    <view 
      class="progress-bg" 
      :style="{ height: barHeight, borderRadius: borderRadius, backgroundColor: bgColor }"
    >
      <!-- 进度填充部分 -->
      <view 
        class="progress-fill" 
        :style="{ 
          width: `${progress}%`, 
          backgroundColor: fillColor,
          borderRadius: borderRadius,
          transition: `width ${duration}ms ${easing}`
        }"
      ></view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ProgressBar',
  props: {
    progress: { // 进度百分比（0-100）
      type: Number,
      default: 0,
      validator: val => val >= 0 && val <= 100
    },
    barHeight: { // 进度条高度（默认8rpx）
      type: String,
      default: '8rpx'
    },
    bgColor: { // 背景色
      type: String,
      default: '#333' // 适配深色背景
    },
    fillColor: { // 填充色（金色，匹配页面风格）
      type: String,
      default: '#ffd18b'
    },
    borderRadius: { // 圆角
      type: String,
      default: '4rpx'
    },
    duration: { // 动画时长
      type: Number,
      default: 500
    },
    easing: { // 缓动函数
      type: String,
      default: 'ease-out'
    }
  }
};
</script>

<style scoped>
.progress-bar-container {
  width: 100%;
}
.progress-bg {
  width: 100%;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
}
</style>